<!--
  ~  Licensed to GraphHopper GmbH under one or more contributor
  ~  license agreements. See the NOTICE file distributed with this work for
  ~  additional information regarding copyright ownership.
  ~
  ~  GraphHopper GmbH licenses this file to you under the Apache License,
  ~  Version 2.0 (the "License"); you may not use this file except in
  ~  compliance with the License. You may obtain a copy of the License at
  ~
  ~       http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~  Unless required by applicable law or agreed to in writing, software
  ~  distributed under the License is distributed on an "AS IS" BASIS,
  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~  See the License for the specific language governing permissions and
  ~  limitations under the License.
  -->

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>

    <script src='/webjars/mapbox-gl/1.13.0/dist/mapbox-gl.js'></script>
    <link href='/webjars/mapbox-gl/1.13.0/dist/mapbox-gl.css' rel='stylesheet'/>
    <script src="/webjars/papaparse/5.2.0/papaparse.min.js"></script>
    <script src="/webjars/vue/2.6.12/vue.min.js"></script>

    <link rel='stylesheet' href='index.css'>
</head>

<body>
<div id='map'></div>
<div id='menu'>
    <div id='layer-menu'>
        <input id='vector' type='radio' name='layer-toggle' value='vector' v-model='layer' v-on:click='changeLayer'>
        <label for='vector'>vector</label>
        <input id='raster' type='radio' name='layer-toggle' value='raster' v-model='layer' v-on:click='changeLayer'>
        <label for='raster'>raster</label>
    </div>
    <div id='mvt-menu'>
        <input id='show-graph' type='checkbox' v-model='showGraph' v-on:click='toggleGHMvt'>
        <label for='show-graph'> show GH graph</label>
    </div>
    <div id='iso-menu'>
        <input id='isochrone-point' type='text' v-model='isochronePoint' @keyup.enter='updateIsochrone'>
        <input id='isochrone-radius' type='number' v-model='isochroneRadius' @change='updateIsochrone'>
        <label for='isochrone-radius'> iso radius (s)</label>
        <input id='show-spt' type='checkbox' v-model='showSpt' @change='updateIsochrone'>
        <label for='show-spt'>show SPT</label>
    </div>
</div>
<div id='hint'>
    <p>Click map to calculate isochrone</p>
</div>
<script src='index.js'></script>
</body>

</html>